Responsive web page elements' positions went wrong in Ipad browser

user_12396326 0
Viewed 53

Problem: I developed a single page website with Reactjs and deployed it to Heroku (It is a remake of an existing website. I want to include it as a part of my portfolio for entry-level web dev job). When inspecting on Chrome Toggle device toolbar, the responsive website worked fine in stimulated mobile and ipad. When opening the site in my iPhone7 Plus, it also worked fine. But when opening in a real iPad, several section elements did not position as expected - they overlapped.

The affected elements are child elements of a container element which has CSS style overflow: auto. display: flex, flex-direction: column. The effect I want to achieve is that all the main contents (except navigation menu, footer and sidebar) are included in a scroll-able container.

Screenshot of the website in ipad browser I spent some time trying to search for answer on the Internet but did not get any luck.

Question: How to make the responsive website works properly in iPad devices?

scrollable responsive overflow position scrollbar
1 Answers

After multiple trials and searches on Stackoverflow, I finally found out the solution.

I came across a stackoverflow question and noticed the similarity of my problem. In the case of my project, the container element's styles include overflow: auto, display: flex, flex-direction: column. For some reason (I still do not understand the theory behind this), when the web app is opened in an iPad browser, the container's child elements (flex items) shrink automatically. That is why child elements overlapped with each other. To solve this, I set CSS style flex-shrink: 0 for each child element. Now the app works properly in iPad.

The link to the other stackoverflow question is as follows: flex items overlapping in Safari (iPad)

user_123963260
Related