Copy link to clipboard
Copied
Hi,
I have CSS to rotate my course to make it always in Landscape mode. This is the CSS I have:
@media (orientation:portrait){
#main_container {
transform-origin: 30% 60%;
transform: rotate(90deg);
top: -153px !important;
}
}
However, when I am in a browser and it is rotated then the playbar buttons disappear. They appear to still be in the DOM but are not showing.
Does anyone know why or how to fix this issue? I am wanting to only display my lesson in landscape mode. If there is another solution that doesn't make the buttons disappear then that would work too!
I am in Captivate 2017.
Thank you.
Copy link to clipboard
Copied
Hi,
Can you confirm the type of device and browser versions you are testing this with?
Copy link to clipboard
Copied
It happens multiple places. It happens in Chrome, and it happens on an iPad when the navigators User Agent is:
Mozilla/5.0 (iPad; CPU OS 11_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E302
Copy link to clipboard
Copied
For anyone still looking for a solution to this, I may have one for you. I just found a similar issue the other day in Chrome.
I have a 1280x720 scalable HTML5 training, and the playbar would disappear when the screen was resized any higher than 1357w x 937h in landscape. It was still in DOM (still active) but not showing. I tracked it back to a missing css style call for webkit browsers. It would affect Chrome and some other webkit-dependent browsers, so it could be a similar issue described in the original post.
The solution, which is adding a line of code to your <style> tag in your index.html file, is written up on my blog​. I also submitted it to Adobe - hopefully they'll be able to provide a more permanent solution.
I hope this helps!