I’ve encountered a reproducible issue with Cloudflare’s Zaraz on ALL iPhone devices where the consent screen fails to display content after scrolling.
This issue makes sites inaccessible, as it also lacks an option to exit the consent screen.
The problem appears to be widespread across different websites that implement Cloudflare’s consent management.
Steps to Reproduce:
Visit a website using Cloudflare consent management, such as www.simes.me, on an iPhone 14 or iPhone 15.
Trigger the consent modal, which includes multiple consent criteria requiring scrolling to view in its entirety.
Attempt to scroll down on the consent modal. Notice that while the screen scrolls, it fails to display any content, showing only a blank (white) area.
Observe that there is no option to dismiss or exit the consent modal, leaving the website effectively inaccessible.
Expected Result:
The consent screen should properly display all content as the user scrolls down, and there should be a clear and functional option to close the consent modal.
Actual Result:
When scrolling through the consent modal, the content disappears and only a blank white screen is shown. Additionally, users cannot exit this screen, preventing access to the website.
This issue has been consistently reproducible across multiple websites using the iPhone 14 and iPhone 15, suggesting a broader problem with the Cloudflare Zaraz configuration or compatibility with iOS browsers.
Attached is a screenshot illustrating the issue as observed during testing.
Since no one is answering on my request and post I will temporary turn off Zaraz Consent until this issue is solved by Cloudflare or if someone from community is solved. I will also try to send direct official support request to them.
I you are testing simes.me example site you cannot see that consent because i turned it off since it causing issues for site visitors. I did this because there were no answers for a long time and i was under pressure to fix problem for my site.
As said problem is wide spread and is affecting every Iphone under conditions I posted.
We realized you disabled on simes.me, because you already wrote that you did. However we tested on other websites with a long consent modal and we were able to scroll down to the buttons and click them just fine.
Hey, i have the exact same issue on multiple pages. So i think this is a problem from the script i adjusted the css a lot, but also we have a lot of problems with the default modal. Is it possible to build my own modal, inject the Texts and Checkboxes from Zaraz? So i can control the html better.
It would be more helpful, when the texts from the Checkboxes and the class=“cf_consent-intro” would be an accordion as well. On mobile the UX is very bad. Where can i find a solution for this?
as a solution i would suggest making the buttons fixed at the bottom and only make the content scrollable
But i think i need to change the html for this
I am also experiencing this bug, using Chrome on iPhone 17.5.1.
The lower content of the consent modal outside of the viewport does not render on scroll until the user interacts with the modal via expanding a consent category accordion:
Conversely, when the rest of the modal does render to show the action buttons, if the user scrolls back up to the top of the modal, the upper content outside of the viewport is then not rendered. Activating/deactivating consent category accordions throughout the rest of the modal also triggers rendering bugs. I am a new user so I cannot attach more than one screenshot per post but I have captures for these too.
Upon further investigation, I believe this is an issue with the WebKit engine and the Shadow DOM. Actions which trigger a repaint by the GPU will result in content in the viewport being displayed as intended. I noticed while taking screenshots that the content would appear immediately after capturing the screen. I’m looking into how to repaint the modal once the content has been loaded and will post back if it works.
I’ve recently figured out a way to fix this bug. It seems to be something to do with how iPhones render the viewport rather than with the Zaraz modal specifically.
In the Custom CSS section on the Content config screen, add a translate: transformZ(0) to whichever sections are failing to render properly. It also helps if you adjust the text size so that all of the checkboxes and buttons fit inside the viewport rather than having to scroll.
