184665 2018-04-16 13:50:57 -0700 iframe inside scrollable div scrolls up after inserting element 2022-08-29 04:01:39 -0700 1 1 1 Unclassified WebKit Frames WebKit Nightly Build iPhone / iPad iOS 11 RESOLVED CONFIGURATION CHANGED https://bugs.webkit.org/show_bug.cgi?id=61491 https://plnkr.co/edit/HDigw0jKv79J1eI81kDJ?p=preview BrowserCompat, InRadar P2 Normal --- 1 gaffne67 webkit-unassigned ahmad.saleem792 ap bfulgham gaffne67 info rniwa simon.fraser thorton webkit-bug-importer zalan oldest_to_newest 1414894 0 gaffne67 2018-04-16 13:50:57 -0700 When moving and displaying a div in an iFrame (using javascript) in iOS devices, the iframe scrolls to top of the window and the user has to scroll back down to see the div. In non-iOS devices the div is moved into view without the iFrame scrolling up (which is the desired behavior). example: https://plnkr.co/edit/HDigw0jKv79J1eI81kDJ?p=preview Steps to reproduce: 1. Navigate to the above url on an iPad or iPhone using Safari 2. Scroll down and tap the "Click ME!" link. 3. Notice the iFrame scrolls to the top. What the link is doing: - The link formats a div, moves it to the top right of the point that was tapped, and makes it visible. Note: If you comment out line 82 (dd.style.display = "block";), the iframe does not scroll to the top. I confirmed this behavior on: iPad (iOS 11.3) - Safari - Chrome - Mozilla Firefox iPad (iOS 11.2.6) - Safari - Chrome - Mozilla Firefox iPhone (iOS 11.2.6) - Safari I confirmed this behavior does not happen on: Windows 10 - Safari (v 5.1.7) - Chrome - Mozilla Firefox Android (7.0) - Chrome 1414898 1 338036 gaffne67 2018-04-16 13:56:27 -0700 Created attachment 338036 Example Run index.html on iPad then follow steps in the bug's initial comment. 1416271 2 webkit-bug-importer 2018-04-20 08:46:11 -0700 <rdar://problem/39597937> 1477674 3 simon.fraser 2018-11-12 12:55:32 -0800 I can reproduce. 1477689 4 simon.fraser 2018-11-12 13:13:20 -0800 Inserting the div is triggering layout in the main document (because of frame flattening), and this is resetting the scroll position. 1477714 5 simon.fraser 2018-11-12 13:49:03 -0800 What seems to be happening is that we do two layouts on the scrollable div. The first is with an unflattened frame, so the contents height is ~300 and we clamp the larger scroll position. Then we do layout again with at the unflattened frame, and go back to larger contents size, but we've already clamped the scroll position. 1477730 6 simon.fraser 2018-11-12 14:21:12 -0800 Actually, I think the real bug is that RenderIFrame::flattenFrame() says to not flatten the frame if boundingRect (the unflattened size!) is outside the document. 1477738 7 simon.fraser 2018-11-12 14:41:28 -0800 Probably caused by https://trac.webkit.org/changeset/88011/ 1497963 8 simon.fraser 2019-01-24 14:33:41 -0800 *** Bug 193769 has been marked as a duplicate of this bug. *** 1497964 9 simon.fraser 2019-01-24 14:34:04 -0800 Another test case at https://plnkr.co/edit/HDigw0jKv79J1eI81kDJ?p=preview 1894479 10 ahmad.saleem792 2022-08-29 04:01:31 -0700 I am unable to reproduce this bug using test link in Comment 0 and Comment 9 on iOS 15.6.1 on iPhone 13 Pro Max. It does not scroll back at the top when clicking on "Click Me" to show <div>. I am going to mark this as "RESOLVED CONFIGURATION CHANGED". Please reopen with updated test case, if this is still happening for anyone else. I don't have iPad to test this but iPhone is working as intended and matching Safari on macOS behavior. Thanks! 338036 2018-04-16 13:56:27 -0700 2018-04-16 13:56:27 -0700 Example example.zip application/x-zip-compressed 2196 gaffne67 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