1

enter image description here

I’m seeing an issue where text only shows up after scrolling the HTML elements out of viewport or after switching to another tab and back. The same issue also happens in WKWebView. Is there a way to prevent this issue from happening? These sections can be scroll horizontally. Not sure if that’s related, but I find it very odd that Safari doesn’t render text that’s in the viewport.

In the attached image, you can see that there are blank rows under EU, UK and US.

Any suggestion is appreciative.

--

Added another image showing HTML elements. Element with .wrapper-row is the one that has overflow-x property. This works perfectly fine on desktop including when simulating to mobile responsive size, but has an issue even with Chrome on iOS.

enter image description here enter image description here

juminoz
  • 3,168
  • 7
  • 35
  • 52
  • Can yo include some minimum code which shows the issue so we can see for ourselves otherwise we'd just be guessing what the problem might be, thanks. – A Haworth Jul 03 '21 at 02:13
  • I added a couple more screenshots. Not sure if it helps since there really isn't anything special about the HTML/CSS. – juminoz Jul 03 '21 at 02:35
  • Please put your code in as code not as screen shots and preferably as a working snippet we can try for ourselves. Also Chrome is basically the same as Safari on IOS. – A Haworth Jul 03 '21 at 02:46
  • What version of IOS are you testing on? – A Haworth Jul 03 '21 at 02:49
  • Test on both iOS 14 and 15. The issue is consistent. I will try to reproduce it on one of the public editors. – juminoz Jul 03 '21 at 05:11
  • @AHaworth I found a workaround that works consistently and I put the details below. – juminoz Jul 03 '21 at 06:04

1 Answers1

1

I found a workaround. After playing around with debugger, I believe this has to do with iOS trying to optimize what content to load. The problem is that it's incorrectly optimizing and not loading content within the initial visible viewport. This is a similar issue where sometime I have to trigger a fake scroll so that content aligns properly in Safari on iOS especially with position fixed or absolute.

To make sure content shows up. I did the following:

$('.selector').css('visibility', 'hidden');
setTimeout(function(){
   $('.selector').css('visibility', 'visible');
}, 10);

This must be done outside of the main thread execution or it doesn't work. That's why I'm putting a small timeout before executing it.

I found an article that mentioned that this has to do with

-webkit-overflow-scrolling: touch

and that a solution is to add

-webkit-transform: translateZ(0px)

but that didn't work for me. You can reference that thread here just in case my solution doesn't work for you and this one does.

iOS textarea text hidden when using -webkit-overflow-scrolling: touch

juminoz
  • 3,168
  • 7
  • 35
  • 52