I'm rendering a list of cards that each display some data along with three rows that allow the user to navigate to a specific, expanded section of that card.
For some reason, Safari seems to be rendering the three navigation rows for each card, but they are white and transparent. I know they're rendered because I can still click on the space where the row would be and the navigation works as expected. It's just invisible.
This problem is not happening when using Chrome. It only happens on Safari: both on my desktop in the browser and when running Safari on iOS. There are no errors in the console.
Another strange puzzle piece is that when I inspect the element's in Safari they appear on the screen! Here is a link to a video I took to show the behavior.
Any ideas???
In case anyone stumbles upon this, I took Jay's advice and started trimming CSS. Eventually I realized that the "update rows" had both display: "flex" and position: "relative" set. Once I removed position: "relative," which wasn't doing anything in the first place but must have been added by mistake, Safari rendered it perfectly.
TLDR: For Safari, display: "flex" and position: "relative" on the same div created rendering issues.
Related
I have a fully functionnal SPA website (Reactjs) which I just made responsive. Everything went smooth except that the site refuses any "scroll movement" on the body, preventing the mobile browser bottom bar to disappear. It is a one page website which I created to have everything displayed full-screen (no need to scroll anything), so I suppose that it is CSS linked, but I just have absolutely no clue on what is happening. Actually, on my Samsung S20+, only the opened burger menu accepts any page scroll movement, permitting me to hide those navigator bars (up and bottom). But once again, I see no specific CSS differences between that burger menu and the main page. Could anyone help me on this ? I'm so lost with it that I don't even know what kind of information I could add in this post except the URL of the website: https://www.epistolads.net.
NB: the sources maps are available on the website, for testing purpose
EDIT 1: just noticed that I can achieve the desired result (scroll on page to hide nav bar) by first zooming a little, if it speaks to anyone.
EDIT 2: Also, I may no "refresh the website" by scrolling "out of screen" up.
Ho mine, got it ! Some month ago, to be sure that no forgotten content gets out of the screen, I added a "overflow-y: hidden;" on the body of the index.html file itself! Changing it back to "auto" gave me back full control on mobile. In case of other people would meet the same problem...
I’m having some trouble with my website, and I can’t get around it.
I’m trying to have my home page fixed, not scrollable. Which is currently working on desktops but not on mobiles. I checked the margins, everything seems fine.
Even though my code is as follow, for this specific page:
html, body {
height: 100vh;
margin: 0;
overflow: hidden;
}
I can’t get this straight. Any help would be highly appreciated.
The website is http://92-blue.com
Thanks!
Try not using 100 vh , on the mobile version. 100 vh displays the entire screen vertically for any device. When you are viewing it with the 100vh it will take into account the entire phone screen that is why it is scroll able, it gets moved down because of the url bar.
This happens on hovering over the inputs and dropdowns. It only happens in Edge, not in Chrome or IE11. Any idea what could be causing it? Apologies for the phone pic, it doesn't appear on print screen for some reason
I'm making an simple mobile web page and i put the textinput on the page and many elements also.
so to see bottom element, the scrolling needed. but when i scrolled my page, i found my textinput moving together abnormally.
below image is that i captured when the error occurred in my android web browser.
first one is original textinput and green box is error occurred.
please let me know how to fix it..
self answer.
It is occurred cause it's content height.
I fixed it by change content height: auto; in css :)
I'm creating a web app exclusively for the iPad/mobile-Safari. The homepage is a run-of-the-mill HTML/CSS page with 3 main sections. But once you click on either of the 3 main buttons, you are directed to a page constructed with 2 iFrames (one on top for Nav, one on bottom for Content)
The problem was that before either of these 3 pages loaded there was a quick flash of white color and then the page loaded. I tried hiding the visibility style of the iframe and then onLoad change it to 'visible' and that worked. But it worked only once, when the iFrame-constructed page first loads. Once it loads and I click on a link on that page, the white flash is back because the iFrame has loaded already so it's already visible.
I tried the obvious like adding a css style to the iframe with a background color (also tried an inline style) but the same thing happened. Any ideas on how to solve it? Thanks!
You can do this cheat:
<iframe src="..." style="visibility:hidden;" onload="this.style.visibility='visible';"></iframe>
In the content, you can catch all link and form:
document.getElementsByTagName("a").addEventListener("click", function(e){
window.top.document.getElementsByTagName("iframe")[0].style.visibility = "hidden";
});
Explain:
First time, your iframe is hidden, and you can see the background of your main page (not white of iframe)
After loaded, Javascript will make iframe is visible and you can see content and background of iframe.
When click a link inside iframe, a trigger will fire, and Javascript will hide iframe again.
I met that problem, and that a whole day to trying to fix, but I cannot except above way. You can meet that issue on Chrome, Firefox, and other browsers, not just on Safari Mobile.
I think the same with KimKha. But "visibility" does not work well sometimes, so I think using "opacity" is better.
<iframe src="..." style="opacity:0;" onload="this.style.opacity=1;"></iframe>
I came across this issue, found lots of solution like KimKha mentions..
None of the solutions assist in further page transitions in the iframe and hiding it really is not a good solution.
With lots of trail and error I came up with the following which fixed my IOS webkit iFrame transition white flash issue, ironically it's such a simple solution:
Just add this to your CSS
html{background:#000}
change the colour to your desired color.
It looks like what the ultimate issue with IOS webkit is when your iframe calls another page, IOS removes the body from the current page for a split second before rendering the content from the new page. by forcing the HTML to have the background colour (default will naturally be white) this fixes the white flicker.
Also note that if your server is set to not allow caching of the .css file providing the styles then you will always get the flicker.
In apache to ensure caching look at
ExpiresByType text/css "access plus 30 days"