I'm playing video on a website. The HTML5 <video> player is housed within a container div which positions it centrally. On most browsers when a user clicks full screen the video plays full screen in the browser without issue, but in Safari on OS the video is positioned half off the screen - I can only see the bottom 50%.
I suspect this is because the <div> container has CSS position:fixed and top:50% height:auto but I can't work out what I need to do to correct for this problem which only seems to occur in Safari.
I can't find any guidance on the web or evidence of anyone experiencing the same problem. Please help!
Website for reference: www.bigredbutton.tv - click a video to play it and then use the native full screen controls.
Thanks!
You can try setting the position to relative. It worked for one of the similar issue we faced.
Related
I found a weird issue while testing my application in safari(Version 13.1).
Basically, an image in the website is broken and it's not loaded.
Chrome and FireFox are showing the alt attribute's value and occupies the least height possible for the unloaded image tag.
But safari browser in my mac occupies way more height than others and having a weird user experience pushing the tag to bottom.
Here is the reproduction of the issue - https://jsfiddle.net/etjhgpdo/1/ - Open this url in both chrome and safari. We can see the difference that heading tag is pushed down as the image tag's height is so much in safari.
Thanks in advance.
As I didn't receive any answer, I am adding the workaround fix I found on web.
Addding onerror="this.style.height = '50px'" on the image tag helped me in reducing the height.
But this will apply to all the browsers as we are not specifying any browser here.
My site is live at http://brand2o.com/. The site is responsive, and works fine at any size on every desktop browser I try and on my Android phone, but the problem is that on an iPad, the right side of the header gets cut off so it says "Licensing P" instead of "Licensing Portal."
I'm having trouble figuring out where the problem lies because I can't replicate it on desktop — Chrome's device mode actually shows it having too MUCH room on the right and the website not centering instead!
Any ideas?
Edit: Looking more closely, it looks like the iPad is giving each navigation item (they're flexbox children) equal width, and messing with flex-basis and flex-grow don't make any difference. I can't find anything about it but is this any kind of known bug? Again, it looks fine everywhere else, including desktop Safari.
Some of this issues are related to version of the OS and Safari also. What I do on this instances, if you connect your iPad to your MAC you will be able to inspect the HTML and CSS and figure the issue out.
Debug apple devices
Another site
Hope this help!
Regards
Figured it out: The lis were set to width: 100%; for when the navigation collapses, and I should have overwritten it in the media query for bigger screens. I added width: auto; and it's fixed!
I need some troubleshooting help from some CSS experts. :)
My website at www.daylightfoods.com loads perfectly on full desktop browsers. While the home page on mobile devices works as well, the sub pages on mobile devices have a problem with the navigation div at the top. I am finding that the navigation div (where the grey background is and the navigation links) is not expanding to the full width of the mobile device screen. I can't figure out why, and would love some help!
I have been doing my mobile testing Google Chrome for iOS (both iPhone 5S and iPad).
Here is the page in question:
http://www.daylightfoods.com/sustainability/
It loads perfectly well on desktop versions, but on mobile devices the navigation at the top for some reason is not full 100% width.
Any help would be greatly appreciated!
It is caused by <meta name="viewport" content="width=device-width"> on your subpages
Check if, inside the div, you have any hidden elements for which you have not set "width: 100%".
In my case I had an hidden img (set to only show up only on large screens) that didn't have a "width: 100%" attribute and thus, even when not visible, the image was extending outside of the parent container (the div), preventing the parent container to take all available screen space.
Hope it helps.
When I browse my website on computer, everything looks fine in all major browsers, however, when I check it on Android phone there's a massive gap below footer. This happens only in portrait mode and in all android browsers. When I view it in landscape mode, the gap disappears in all browsers.
I tried 'playing' with viewport meta tag, but it doesn't help.
My site's width: 1300px and height:100%. Also, footer has padding-bottom:0; margin-bottom:0;
What could cause this problem to happen only in portrait mode?
Update: It seems that the height of a page isn't large enough to fill entire screen of my mobile so there's this gap. When I browse the page it's completely zoomed out according to sites width. How to make it zoom in according to site's height instead and thereby eliminate the bottom gap?
Please help
P.S. Unfortunately, I cannot provide you link to the site as it's on a local server.
Ok, guys. I managed to fix it. Probably not the best fix in the world but better than nothing.
So what I did was forced minimum zoom by using viewport minimum-scale=0.6.
No bottom gap after this fix.
I am using greybox on my business site so that users can login and access their accounts.
Example of my site
When the window is activated by selecting "login" or "sign up" at the top of the page, the size of the page or window either expands or changes (discovered by showing scroll bars on bottom and right of window.) How can I keep this from happening? I want the page to have the same size as it did before the window was activated.
While an old thread, for those still using greybox, the following update might be helpful:
Setting the GB_overlay position to "fixed" (in gb_styles.css) as Yoel suggested solved the problem for greyboxes that are not full screen (e.g., gb_page_center), but a full screen greybox (e.g., GB_showPage) still had the horizontal scrollbar and expanding browser window on Chrome, Edge, Chrome on iOS, and Safari on iOS.
Setting the GB_overlay width to 100% wasn't needed for the non-full screen greyboxes, and didn't fix the problem for a full screen greybox. Instead, setting the GB_overlay max-width to 100% fully resolved the expanding browser and horizontal scroll bar appearance in Chrome, Edge, Chrome on iOS, and Safari on iOS.
As Kevin also experienced, Firefox never had these problems with greybox, and these updated changes to the GB_overlay css had no effect on Firefox;s always correct rendering of the greybox.
Yoel's solution worked. He suggested changing the style sheet to reflect "fixed" with 100% width. This fixed the issue on all browsers.