SwipeOut Leaves 1px Line on Side

[XPario]

I am using the SwipeOut component. It is leaving a 1px line revealing the button underneath. for example if the button underneath is red, there is a 1px vertical line on the right side of the SwipeOut. Image is below and HTML is below. Appreciate any help.

<div id=“method-list” class=“list media-list method-list”>
<ul class=“divided-list”>
<div id=“method-template” hidden>
<li id="{sfid}" class=“swipeout spacer1”>
<div class=“swipeout-content”>
<table class=“card-info”>
<tr>
<td rowspan=“2” class=“card-logo”>
<img class=“card-logo” alt="[cc]" src="" />
</td>
<td class=“card-bankname”>{bankname}
<td rowspan=“2” class=“card-default”>{default}
</tr>
<tr>
<td class=“card-details”>{cardnumber}  {expiration}
</tr>
</table>
</div>
<div class=“swipeout-actions-right”>
<a href="#" onclick=“setDefaultItem($(this).closest(‘li’).attr(‘id’));” class=“swipeout-action-setdefaultitem”>Set
Default
<a href="#" onclick=“deleteItem($(this).closest(‘li’).attr(‘id’));” class=“swipeout-action-deleteitem”>Delete
</div>
</li>
</div>
</ul>
</div>

[Shawn_Jackson]

I too am having this issue. Even the kitchen sink demo has the red and gray lines showing.

How can we hide the 1px button issue?

I’m viewing it on Chrome desktop latest version. Thanks!

[nolimits4web]

@Shawn_Jackson do you see this issue on real device? Because usually it is only in emulator because of browser rendering/zoom

[Shawn_Jackson]

Thanks @nolimits4web I see it in Chrome desktop on a webpage.

Here it is on my website:

I do notice that the red line will disappear/appear as I resize the browser width.

[nolimits4web]

You can add this CSS style if it bothers you (P.S. you shouldn’t use swipeouts on desktop):

.swipeout-actions-right {
  transform: translateX(calc(100% + 1px));
}