Firefox CSS issue with inside skewed div

Question

I am having an issue in Firefox where the tags have a border that sticks out past the containing div despite no border being set.

Screenshot in other browsers and what it should look like:

and in Firefox:

Single file with code:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">

<div class="sticky-links">
    <ul>

        <li>
            <div class="unskew">
                <a href='www.theonion.com'>
                    <i class="fa fa-rss" aria-hidden="true"></i>
                    The Onion
                </a>
            </div>
        </li>
        <li>
            <div class="unskew">
                <a href='http://www.google.com'>
                    <i class="fa fa-google-plus" aria-hidden="true"></i>
                    Google
                </a>
            </div>
        </li>
        <li>
            <div class="unskew">
                <a href='asfd'>
                    <i class="fa fa-facebook" aria-hidden="true"></i>
                    some text
                </a>
            </div>
        </li>
    </ul>
</div>

<style>
    .sticky-links ul{
        position: fixed; 
        right: -15px;
        top: 50%;
        z-index: 999;
    }

    .sticky-links li{
        /*border: 1px solid black;*/
        text-transform: uppercase;
        /*transition-duration: 0.2s;*/
        background-color: black;

        transform: skew(20deg);
        -webkit-transform: skew(20deg);
        -moz-transform: skew(20deg);
        -o-transform: skew(20deg);
        padding: 5px;

        padding-right: 15px;
        list-style: none;   
        margin-bottom: 10px;
    }
    .sticky-links li:hover{
        background-color: #f60; 
    }


    .sticky-links li div a{
        padding: 5px;
        text-transform: uppercase;
        /*transition-duration: 0.2s;*/
        background-color: black;

        font-size: 1.75rem;
        color: white;
        text-decoration: none;
    }

    .unskew{
        transform: skew(-20deg);
        -webkit-transform: skew(-20deg);
        -moz-transform: skew(-20deg);
        -o-transform: skew(-20deg);
    }
    /*font awesome icon padding */
    .unskew a i{
        padding-right: 5px; 
    }
</style>

<script>
$('.sticky-links li').hover(
        //mouse enter
        function(){
            $(this).find('*').css('background-color', '#f60');
        },
        //mouse leave
        function(){
            $(this).find('*').css('background-color', '#000');
        }
        );
</script>

and a jsfiddle with the relevant code:

https://jsfiddle.net/cyetuh82/2/

The page can be inspected and we see it is in fact the inner causing this.

I've tried quite a few css changes such as setting border: none !important on all elements, clear: both etc.

Note: the jsfiddle doesn't quite look the same, but you can still see some sticking out from the divs which I believe will have the same underlying cause.

Thanks,

Kalen

Edit:

The jsfiddle appears to not be capturing the root issue it is a problem with the a nested inside everything hanging out (can be seen when I inspect element on the page)

Add to .unskew `padding-left: 10px;` and see I you have the same issue. — Observer, Aug 16 '18 at 17:17
You need to add `transform-origin: left bottom;` to the `unskew` class, so the start position of the transform is at its left/bottom corner. Furthermore, your non-prefixed property `transform` should be last, not before the prefixed one's. Updated fiddle: https://jsfiddle.net/cyetuh82/4/ — Asons, Aug 16 '18 at 17:22
@LGSon I do see that functioning in the jsfiddle but I seem to be having the same problem on my site. — kalenpw, Aug 16 '18 at 17:31
At least you now know what goes wrong, so keep elaborate...and if you still use what I suggested, and it doesn't work, post a sample that reproduce the issue or else we can't help. — Asons, Aug 16 '18 at 17:33
And btw, for `transform` to work properly, the element can't be `display: inline`, which a link `a` is by default...so also add e.g. `display: inline-block` to your `a` — Asons, Aug 16 '18 at 17:36
@LGSon if you post that as answer I'll accept, sure enough switching the a to `display: block` fixed it — kalenpw, Aug 16 '18 at 17:37
Many answers cover that already, so I linked to one of them. — Asons, Aug 16 '18 at 17:38

score -1 · Answer 1 · answered Aug 16 '18 at 17:26

-1

You just need to add a line of css rule in your code. Add padding-left: 10px to the css seletor .sticky-links li. Here is the updated css.

.sticky-links li {
  text-transform: uppercase;
  background-color: black;
  transform: skew(20deg);
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  padding: 5px;
  padding-right: 15px;
  list-style: none;
  margin-bottom: 10px;
  padding-left: 10px;
}

And also, I don't understand why you are using jquery code to achieve the background color property. You have already added css rule to achieve it.

answered Aug 16 '18 at 17:26

Aryan Twanju

2,464
1
9
12

Don't solve wrongly used properties with padding's, instead show why it went wrong and how to fix it properly...and if you don't know, don't answer. – Asons Aug 16 '18 at 17:28
Thank you for very nice suggestion of yours in the most nicest possible words. And yes I know why it went wrong. If you really want to know, here it is. He has applied the black background for normal state and orange color background on hover for every element that is a child of the selector `.sticky-links li` with his jquery code. And the child element goes bit out of its parent element because of the parent element being skewed. If he removes the jquery code, it would be fixed. I hope I answered your rude question. Try to speak nice, you are in a community. Everyone knows something. – Aryan Twanju Aug 16 '18 at 17:41
If you read my comments at the question, you'll find both what went wrong and how to fix it. And if my previous comment offended you, am sorry, just tried to be honest and keep given answer having a reasonable quality, which IMHO your isn't. – Asons Aug 16 '18 at 17:50
thanks for your suggestion. will do. the main thing here i guess is the solution and that is what i guess people come here looking for. – Aryan Twanju Aug 16 '18 at 17:59

Firefox CSS issue with inside skewed div

1 Answers1