0

Sometimes, when applying a CSS filter, HTML elements become repositioned.

As a simple reproducible example, follow these steps:

  1. Go to https://www.virustotal.com/gui/
  2. Click on 'Choose file' and select any local file to scan
  3. In the scan results page, inject this almost meaningless CSS code:
vt-ui-shell { filter: hue-rotate(0deg); }
  1. Click on the site's upload button, which is the up arrow located near the upper right corner of the viewport
  2. Notice the position of the "By submitting data below..." window displayed by the website (you may have to scroll down to see it)
  3. Remove the CSS code injected in step 3
  4. Notice that the position of the "By submitting data below..." window changes

Why does this happen and is there any way to prevent filters from doing this?

Update:

Our friend Temani Alf generously provided a link to this related question:
Why does applying a CSS-Filter on the parent break the child positioning?

I think this may explain the phenomena, but I'm interested in learning if there is a way to prevent this from happening when you can only change the CSS and not the underlying HTML code.

RockPaperLz- Mask it or Casket
  • 5,361
  • 10
  • 45
  • 69
  • 1
    _"Go to https://www.virustotal.com/gui/"_ Nope. Your question should contain a [mcve]. – j08691 Mar 10 '21 at 19:40
  • I am pretty sure a duplicate of this: https://stackoverflow.com/q/52937708/8620333 .. I let you confirm since I won't try to upload something in an external site – Temani Afif Mar 10 '21 at 19:47
  • @TemaniAfif Thanks. I'll check out that QA too. FYI, you can create a text file with "Hello World" in it, and specify that file. It accepts literally any input file (up to a certain size). – RockPaperLz- Mask it or Casket Mar 10 '21 at 19:50
  • 1
    yes but it's against the SO rules ;) that link will one day die and the question will become irrelevant – Temani Afif Mar 10 '21 at 19:51
  • @TemaniAfif Ah, I see. But I think that link has been around longer than SO, and more importantly, it's likely that link will be valid for longer in the future than SO! :) – RockPaperLz- Mask it or Casket Mar 10 '21 at 19:54
  • 1
    it's not only about the link, the behavior you described may change due to some code changes. – Temani Afif Mar 10 '21 at 19:57
  • @TemaniAfif That's a very good point. Trying to create a minimal reproducible example will be time consuming because I'm not clear why this is happening. I just finished reading your answer (which I upvoted, of course) on the linked question (upvoted too), and I have a strong hunch that could explain the phenomena. But the big question is: Is there a technique to use to avoid this artifact when you can't change the underlying HTML? (I'll edit my question to make this clear.) – RockPaperLz- Mask it or Casket Mar 10 '21 at 20:00
  • not really, you cannot avoid the effect of filter. The filter will change the containing block so either make sure the containing block remain the same even after the filter or don't add filter (in this case you can force it with `filter:none!important` since it's a *meaningless* filter like you said) – Temani Afif Mar 10 '21 at 20:13
  • @TemaniAfif Thanks. I used `hue-rotate(0deg)` in my example just to help isolate the issue by specifying a filter that doesn't really do anything. In reality, I want to use a complex filter. The trick is that the elements are in Shadow DOM on that site, and I'm applying the CSS with Stylus. Unfortunately, Stylus still doesn't support Shadow DOM, so I may be stuck unless I switch to something besides Stylus. – RockPaperLz- Mask it or Casket Mar 10 '21 at 20:30

0 Answers0