Chrome clip-path creates a white horizontal line shape that resembles a paperclip

Having an issue with horizontal white lines appearing through a div with clip-path set and background image in Chrome. Any suggestions on how to fix this?

Check out the screenshot for reference: Screenshot showing the horizontal white line bug

If you need more context, here is a link to the course page: Learn more about our undergraduate Biomedical Science program

Answer №1

Recently encountered a similar problem where I resolved it by applying a -1px margin to the edge featuring the white line.

.clipped-box {
  clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 60px, 100% 100%, 0 100%);
  margin-bottom: -1px;
}

This challenge arose when attempting to overlay two sections with clipping masks. The upper section had a white line at the bottom, so I adjusted the positioning of the following section to overlap.

Answer №2

This issue has been identified previously, references can be found at Clip-path on Chrome leaves a strange line on the edge and CSS - Strange border appearing on Chrome mobile with clip-path

It seems to be an anomaly specific to Chrome's rendering.

In your situation, I managed to eliminate the line by specifying a height for your polygon container:

.course_page #facilities .facility--menu {
    clip-path: polygon(0 0,100% 5%,100% 95%,0 100%);
    height: 25em;
}

The height is only marginally taller than what it currently is.

Other CSS attributes that were tested did not appear to affect the line.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Remove the footer from the main section

I'm facing an issue with the web page layout of my website. Here is a snippet of the structure: <body> <div class="container"> <div class="sidebar"> </div> <div class="content"> </div> </div> < ...

Optimizing website layout for mobile devices

I have a website with a fixed page layout at . It displays properly on desktop browsers but not on mobile devices. The website is adjusting to fit the browser size, but some components are changing format. Can anyone offer assistance? Thank you! ...

Background image that covers the entire page

I am using background-size:cover to ensure that the entire background positioning area is covered by the background image. However, I've noticed that setting it to "cover" sometimes cuts off parts of my background image. Is there another way to achiev ...

Tips on adjusting the position of an icon within a dropdown list in HTML?

I have a search field on my webpage with an icon inside it. I managed to find some sample code for the icon. https://i.sstatic.net/WUOot.png However, I am struggling to position the icon to the right of the search box. I've tried adjusting the styli ...

Adjusting the cell size to align with the height of another cell in the same row

Within a table row, I have two cells that contain divs and the height varies due to changing content. Is there a way for one cell to take up 100% height to match the other cell? You can see an example here. The goal is for the second cell and its div to ...

What is the best technique for positioning a div using the ELEMENT_NODE method?

  #top { height: .5rem; padding-left: 2.7rem; line-height: .5rem; color: #666; font-size: .12rem; position: relative; background-color: rgb(241, 241, 241); } #top div { position: ...

What is the best way to ensure that my cards maintain consistent proportions?

My cards are not maintaining their proportions, causing buttons to pop out of the card and the card dimensions changing. I realize this issue is due to using fixed width and height in combination with flex. I'm struggling to find the best solution to ...

The form submission did not yield any results

function calculateCost() { var projectorCost=0,price=0,quantity=0,discountPrice=0,totalCost=0; var modelName=document.getElementById('projectormodel').value; var quantity=document.getElementById('q ...

Move the accordion slider to the top of the browser

I'm working with an accordion menu that has some long content. To make it more user-friendly, I want to add a slide effect when the accordion items are opened. Right now, if you open the first two menu items, the last item's content is cut off a ...

Bootstrap Model Footer Button Alignment

click hereI'm facing an issue while adding buttons to the model footer. The buttons are not aligning in line, instead they move to the next line. <div class="modal-footer"> <form method="post" action="admin_view"> ...

Which specific divs should I assign an ID to within the class?

Is there a way to apply the gray box style to specific divs instead of all of them? Should I include an id somewhere in the code? <!DOCTYPE html> <html> <head> <style> div { width: 320px; padding: 10px; border: 5px soli ...

Creating a List with Sublists that are displayed when hovering over the parent List is a key element of effective design

Hovering over 'View Rows' should open up both New Records and Old Records <div> <li>Add Rows</li> <li>DeleteRows</li> <li>View Rows <ul> <li>View New Records</li ...

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

Choose a child using react material ui's makeStyles

Currently utilizing React and Material UI, I am attempting to use the nth-child selector with the MUI makeStyle function. However, it is not working as expected. Here are some screenshots for reference: https://i.sstatic.net/5dVhV.png https://i.sstatic.ne ...

Customize the appearance of a shadow-root element

Is there a way to modify the styles of a shadow element? Specifically, is it possible to extend or overwrite certain properties within a CSS class? I am currently using a Chrome extension called Beanote, which has not been updated since April 2017. There i ...

Using Jquery fadeIn along with responsive CSS media queries

Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...

The property 'scrollHeight' is undefined and cannot be read

I've created a messaging system using javascript and php, but I'm facing an issue. When new messages are received or the chat log grows longer, it creates a scrollbar. The problem is that when a new message arrives, the user has to manually scrol ...

How to create a heading within a Bootstrap list item?

Attempting to replicate this layout using Bootstrap 3 This is my current progress <ul class="list-group"> <li class="list-group-item> Cras justo odio </li> <li class="list-group-item> Dapibus ac facilisis in </l ...

Creating a three-row CSS layout where the middle row aligns to the right side

I am working on developing a mobile device layout with 3 blocks. The first and third blocks contain text fields, while the second block is filled with a map. However, all of my blocks don't look good when they are too wide. The browser window can have ...

Position a div element on top of Google Maps to create a floating

Currently working on a website and attempting to add shadows over Google Maps by using a <div> element for a shadow effect: Unfortunately, the desired effect is not being achieved. This is the current CSS code in use: html { height: 100% } body ...