Safari on iPad leaves a blank area when set a div to display: none

Question

Dunce OP

Created Dec ’21

Replies 2

Boosts 0

Participants 3

I'm trying to develop a web extension for Safari on both Mac OS and iPad.

There is one div that I want to hide by default, when user clicks a button, the div shows with proper content. If the button is clicked again, the div goes hide again, and so on.

I've got it to work on Mac OS by toggling the div's display property between "block" and "none". This works perfectly on Mac OS but on iPad, when going from "block" to "none", the content is hidden but the space is kept. Is this a bug on iPad Safari or am I doing something wrong? Check the screenshots below.

Safari extension is supported on iPad since iOS 15, I've tested this on iOS 15.0 and 15.2, same result.

Expected behavior: image3 should look exactly like image1, without the shadow area on lower bottom.

Extension's popup window by default:

When user click, show the div:

User click again, hide the div:

Any help is appreciated.

Boost

Answer 1

bqiao OP

Jan ’22

Saw this after just posting my own question: https://developer.apple.com/forums/thread/698319

The html tag has the right height but whatever that's holding the html tag is not adjusting its height accordingly. This is only problematic for iPad because iOS shows popup in a different way.

Sorry should have added a comment, not answer. Don't see an option to remove it.

0

Answer 2

Engineer OP

Apple

Jan ’22

Can you please file a bug about this on https://feedbackassistant.apple.com? Including a sample project that reproduces this would be very helpful as well.

Thanks!

0