There is a GitHub issue for this problem, but there is no working solution and the issue is locked.
The issue does mention setting Swipers‘ roundLengths to true, but this didn’t work for me.
My workaround (for a single slide slideshow):
.swiper-slide-next {
translate: 1px 0;
}
It reliably fixes the problem without affecting the slideshow on devices that don’t have this issue.
Github issue: https://github.com/nolimits4web/swiper/issues/2722
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:
While Chrome renders everything perfectly fine, Firefox produced this:
<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>
.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;
}
<?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.
<?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.
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.
This is pretty simple, but i think it’s currently undocumented, just add this:
{opcMountPoint id='opc_before_filter' inContainer=false}
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.
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!
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;
}
}
}
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 …)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 …)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!
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.
This solution is also very usefull on pages with
$(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');
}
});
});