Frontend

Wrong background-size for SVG-Background image in Firefox

Verfasst am 4. Februar 2022 um 11:49.

Not the first time i ran into problems with SVGs preserveAspectRatio attribute, but i can’t remember a case where Firefox handled this different from Chrome. However, lets have look at the this weird behavoir.

The goal was to build a very flexible lines-background-element with CSS-Grid:

Chrome result without preserveAspectRatio=“false“ on the SVG-Wrapper

While Chrome renders everything perfectly fine, Firefox produced this:

Firefox result without preserveAspectRatio=“false“ on the SVG-Wrapper

The Code:

HTML

    <div class="line-bg line-bg--middle-center-to-bottom-right">
      <div class="line-bg__item line-bg__item--curve-tl"></div>
      <div class="line-bg__item line-bg__item--flex-h"></div>
      <div class="line-bg__item line-bg__item--flex-v"></div>
    </div>

CSS

    .line-bg{
      --line-edge-group-size: 268px;
      --line-group-size: calc(var(--line-edge-group-size) * 0.5522);
      position:absolute;
      left:50%;
      top:50%;
      right:0;
      bottom:0;
      display:grid;
      grid-template-columns: var(--line-edge-group-size) auto;
      grid-template-rows: var(--line-edge-group-size) auto;
    }
    .line-bg__item--flex-v{
      background-image: url('line_bg_v.svg');
      background-repeat: repeat-y;
      background-position:0 0;
      background-size: var(--line-group-size) auto;
    }

SVG (the wrong code)

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 690 25" xmlns="http://www.w3.org/2000/svg">
  <g transform="matrix(1, 0, 0, 0.961538, 0, 0)">
    <path d="M676.115,-0L676.115,26L690.031,26L690.031,-0L676.115,-0ZM507.101,-0L507.101,26L521.018,26L521.018,-0L507.101,-0ZM338.083,-0L338.083,26L352.004,26L352.004,-0L338.083,-0ZM169.069,-0L169.069,26L182.986,26L182.986,-0L169.069,-0ZM13.916,-0L0,-0L0,26L13.916,26L13.916,-0Z" style="fill:#878787;fill-rule:nonzero;"/>
  </g>
</svg>

So after testing around, with the background-size, -position, etc. the conclusion was that the SVG itself must be the problem. And it kinda was, but i’im pretty sure its a Firefox Bug with SVG + background-size. As you can see in the code, i was not trying to change the aspect-ratio in any way, i just set a fixed with + auto height for the background and let em repeat verticaly, so the preserveAspectRatio shouldn’t needed here.

The Workaround

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 690 25" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <g transform="matrix(1, 0, 0, 0.961538, 0, 0)">
    <path d="M676.115,-0L676.115,26L690.031,26L690.031,-0L676.115,-0ZM507.101,-0L507.101,26L521.018,26L521.018,-0L507.101,-0ZM338.083,-0L338.083,26L352.004,26L352.004,-0L338.083,-0ZM169.069,-0L169.069,26L182.986,26L182.986,-0L169.069,-0ZM13.916,-0L0,-0L0,26L13.916,26L13.916,-0Z" style="fill:#878787;fill-rule:nonzero;"/>
  </g>
</svg>

Set preserveAspectRatio=“none“ on the SVG wrapper. Done.

JTL Shop (5): OnPage Composer (OPC)

Verfasst am 28. April 2021 um 15:41.

Because i had some pain when starting development with JTL Shops new OPC, I start to collect some stuff and things here to help others.

Add new OPC-Mount Point / Region to the Template

This is pretty simple, but i think it’s currently undocumented, just add this:

{opcMountPoint id='opc_before_filter' inContainer=false}

Perform emtpy check for OPC-Mount Points

As of now, there seems to be no function to check if a OPC-Mount Point is empty. So we need to use Smarty instead:

{* Add further OPC region *}
{capture "opc_category_top"}
    {opcMountPoint id='opc_category_top'}
{/capture}

{if $smarty.capture.opc_category_top|strip|replace:' ':'' != ""}
    <div class="result-wrapper-top">
        {$smarty.capture.opc_category_top}
    </div>
{/if}

This is only required if have an extra wrapper surrounding the mount point.

… more to come.

Good ol‘ Font Awesome: Fork Awesome

Verfasst am 23. Februar 2021 um 10:01.

I’m not a big fan of Font Awesome 5, i’m sure it has an amazing feature set and stuff, but I’m completely fine with simple, working iconfonts.

However, I just wanted to drop a link to project „Fork Aswesome“, a fork of Font Awesome 3 who keeps it updated. Fantastic!

CSS (fake) placeholder text for select elements

Verfasst am 24. April 2020 um 08:13.

For now, there is no placeholder attribute available for HTML select elements what is really bad if you need to achive some kinda reduced form styling, without field labels and stuff.

But there is a workaround, we have to add the label as the first option with a value=““. Now we want to style it like the other placeholder texts. To do so we need just a little JS & CSS:

      var $placeholderSelects = $('form select');
      if($placeholderSelects.children().first().is(':selected')){
        $placeholderSelects.addClass('select-placeholder-option-active');
      }else{
        $placeholderSelects.removeClass('select-placeholder-option-active');
      }
      $placeholderSelects.on('change', function(){
        if($(this).children().first().is(':selected')){
          $(this).addClass('select-placeholder-option-active');
        }else{
          $(this).removeClass('select-placeholder-option-active');
        }
      });

The JS ensures that we just have the placeholder style / color, if the first value is selected. (Yes, i better should put this in a function …)

select{
  &.select-placeholder-option-active{
    color: $input-placeholder-color;
    > option:not(:first-child){
      color: $input-color;
    }
  }
}

Fix blurry skewed pseudo elements (before & after) in Firefox

Verfasst am 18. März 2019 um 19:05.

Problem: I have some buttons with one skewed side using skewed, absolute positioned pseudo element. In Firefox the pseudo element (::before) looks blurry and the blur overlaps the parent element, so it looked really bad.

Solution: After a failed Google search i tried to fix it on my own. The simple solution is: Add transform: skew(0) to the parent element.

(mehr …)

Keyframe animation is not starting in Safari

Verfasst am 21. Februar 2018 um 08:43.

Lately i was running into an Safari issue – what happens really often lately, i really start to fall in love with this „amazing“ piece of software. Whatever – the thing is, you may come to the idea to define all of your animation properties and set it to animation-play-state:paused. So you can simply trigger the animation with help of an equal class, lets say .play{ animation-play-state: running; }.

(mehr …)

CSS Object-Fit ♥♥♥

Verfasst am 9. Mai 2017 um 13:09.

I first heard of the object-fit attribute a couple of month ago and i make extensive use of it since this ‚magic moment‘. It’s just so freaking helpfull for RWD that i won’t miss it anymore.

The worse thing about it, like most new techniques, some major browsers do not support it. It’s just IE & Edge and personaly i wouldn’t give a shit about them, but as web professionals – sadly – we still have to care about those.

So i found a nice workaround which will work in all Browsers supporting the background-size property.

It’s pretty simple: In JavaScript, use modernizr to detect missing object-fit support, read out the image path, set the image as background to the parent container. The rest ist just a little css.

Please see the detailed solution here: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3

Thank’s alot to Primož Cigler!

Smart Sticky Sidebar via hcSticky

Verfasst am 11. Januar 2017 um 12:29.

If you ever need to have a sticky sidebar, which has a variable height, which is working well with a footer region, without having a second scrollbar … try https://github.com/somewebmedia/hc-sticky

Trying to build this with waypoint.js or something, is pain in the ass. This great library finished the job in < 5 minutes.

Smooth scrolling anchor links and hash url’s – also base tag fix

Verfasst am 6. Januar 2017 um 08:37.

This solution is also very usefull on pages with -Tag. Sometimes the basetag will make anchor links not working properly anymore (redirecting to the base url).

$(document).ready(function () {
  // Anchor links on click based on Chris Coyier's solution: https://css-tricks.com/snippets/jquery/smooth-scrolling/
  $('a[href^="#"]:not([href="#"])').click(function(e) {
    if (location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top - 80 + 'px'
        }, 1000);
        return false;
      }
    }
  });

});

// Smooth scrolling anchor links
// to top right away
if (window.location.hash)
  scroll(0, 0);
// void some browsers issue
setTimeout(function () {
  scroll(0, 0);
}, 1);

$(function () {
  // *only* if we have anchor on the url
  $( window ).load(function() {
    if (window.location.hash && $(window.location.hash).length > 0) {
      // smooth scroll to the anchor id
      $('html,body').animate({
        scrollTop: $(window.location.hash).offset().top - 80 + 'px'
      }, 1000, 'swing');
    }
  });

});

Adaptive background (color taken from an image via JS)

Verfasst am 18. Dezember 2015 um 12:05.

Take a look at this amazing library. You may now the effect from Googles image search.

The library take´s the „primary color“ of an image, and set it to the image container as background color. Similar to the tv technique „Ambient Light“.