NicolaeNMV / BehindTheOverlay

One button to close any overlay on any website
296 stars 29 forks source link

Overlay used on pinterest #11

Closed kaie closed 3 years ago

kaie commented 9 years ago

Go to https://www.pinterest.com/bevislol/judi-dench/ and scroll all the way down. After a few moments, a dark transparent overlay will appear that covers the lower quarter of the page, and it cannot be removed with this addon.

Is this a different kind of overlay? Would it be possible to make it removable?

kaie commented 9 years ago

And if you click an item on that page, a different centered popup overlay appears, which the addon cannot be remove either.

nitrocode commented 6 years ago

@kaie I stepped through it and it looks like pinterest doesn't use a z index to create an overlay. Instead, it uses a well crafted div tag. See the following snippet from the link provided.

<div>
  <style>body { overflow: hidden }</style>
  <div data-test-id="giftWrap" style="background: rgba(0, 0, 0, 0.65);transition: height 0.5s cubic-bezier(0.26, 0.87, 0.74, 0.93) 0s;backface-visibility: hidden;bottom: 0px;color: rgb(255, 255, 255);height: 100%;position: fixed;width: 100%;left: 0px;">
    <div data-test-id="quarterBanner" class="gridCentered" style="transition: opacity 0.5s linear 0s; visibility: hidden; opacity: 0; height: 0px; pointer-events: none;">...</div>
    <div data-test-id="fullBanner" style="transition: opacity 0.5s linear 0s;visibility: visible;opacity: 1;height: 100%;display: flex;">...</div>
  </div>
</div>

For this extension to detect it, in case z-index turns up nothing, it could look for a items containing these parameters too: height: 100%;position: fixed;width: 100%;left: 0px;

So overlay_remover.js#L127 would have to change from

return utils.getZIndex(el) > 0;

to this

return utils.getZIndex(el) > 0 || (el.style.position === 'fixed' && el.style.height === '100%' && el.style.width === '100%' && el.style.left === '0px');

This would work for pinterest but would be a crude way to implement this. For instance, some websites may use a similar technique but only encompass a height / width of 90% instead of 100% or use a left attribute using em instead of px...

What do you think @NicolaeNMV ?

NicolaeNMV commented 3 years ago

Sorry didn't see your comments. But now Pinterest seem to be less aggressive with overlays, and the extension can now close the existing overlay.