minify css causes problem (or highlights bug) with calc() in chrome

  • Resolved gbruzzo

    (@gbruzzo)


    3 years ago

    Hi there,

    hope you are all well.

    I encountered a very peculiar bug whilst testing SG Optimizer very recently.
    I believe this is a parsing bug that affects Chrome and webkit-based browsers.

    Please Note: This is a Chrome parsing bug, but you should be aware of it.

    The CSS minification algorithm of SG Optimizer results in the alteration of a some of css statements in our code

    Specifically

    z-index: calc(var(………) + 1000);
    becomes
    z-index: calc(var(………) + 1e3);

    This saves 1 byte Chrome (and other webkit based browsers) is unable to parse this.
    the value of z-index then reverts to auto with consequences.

    – The issue only affects Chrome, in particular desktop Chrome.
    – changing ‘+ 1000’ to ‘+ 999’ (or ‘+ 2000’ to + 1999) in our code results in the css minification leaving this and similar css entries alone.
    – Chrome is able to parse 1e3px (a minified version of 1000px)
    – Chrome is unable to parse / understand “z-index: 1e3;” (flags the entry as invalid) but understands “width: 1e3px;”

    This is a very small issue, that can have large consequences.

    We have elected to ( hopefully temporally ) remove the specific css file (containing the statement above) from minification.

    Not sure who should flag this bug on the chromium bug forums.
    Any suggestions?

    Cheers

    Giacomo Bruzzo

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Hristo Pandjarov

    (@hristo-sg)

    SiteGround Representative

    3 years ago

    I am afraid there isn’t much we can do right away about it. We use a minification binary on the server to save client resource while generating thsoe file. I will take that upstream andd once it is fixed, the new minify will be applied on all SG servers.

    Thread Starter gbruzzo

    (@gbruzzo)

    3 years ago

    Hello @hristo-sg

    thanks for your response. I honestly do not know who should ‘take responsibility’ for this one (my 2c would be the Chromium devs, but that would require someone going down a rabbit hole). SG optimizer is technically doing nothing ‘wrong’, nor is the plugin whose css is being affected.

    I have written to the developer of that plugin whose code is being affected suggesting they change ‘1000’ to ‘999’ or ‘1001’ (these quantities do not get ‘minified’), but I do wonder whether this is the right thing to do.

    In any case, many thanks

    Giacomo

    Plugin Author Hristo Pandjarov

    (@hristo-sg)

    SiteGround Representative

    3 years ago

    I have filed an issue on github and expect resolution soon, they are actually very fast fixing those.

    Thread Starter gbruzzo

    (@gbruzzo)

    3 years ago

    @hristo-sg

    Thank you very much

    Plugin Author Stoyan Georgiev

    (@stoyangeorgiev)

    3 years ago

    Hey there @gbruzzo,

    The improved minification should be updated tomorrow. The issue should be fixed. Any feedback is highly appreciated. If you still encounter any issues, feel free to reach back to us.

    Kind regards,
    Stoyan

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘minify css causes problem (or highlights bug) with calc() in chrome’ is closed to new replies.