Bug Report: Driver.js Button Text Duplication When Styling via CSS or onPopoverRender

[AchrafELGhazi]

Description

When styling the next/done buttons in Driver.js (either via CSS or onPopoverRender hook), the button text gets duplicated and rendered twice with a slight offset/shift. This creates a visual glitch where you can see overlapping text that's slightly misaligned.

Steps to Reproduce

1. Create a Driver.js tour configuration
2. Apply custom styling to the next button via CSS class or onPopoverRender hook (e.g., add background color, text color, padding, border-radius)
3. Launch the tour
4. Observe the next button (and done button)

Expected Behavior

Button should display text once, cleanly centered with the applied custom styles

Actual Behavior

• Button text appears twice, overlapping with a slight offset/shift
• Both text instances are styled with the custom styles applied
• The shift creates a visible "doubled" or "ghost text" effect
• Makes it obvious there are two instances of the same text rendered

Example Code That Triggers The Bug

// Via CSS
.driver-popover-custom .driver-popover-next-btn {
  background: linear-gradient(135deg, #f15722 0%, #e0481d 100%);
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
}

// Or via onPopoverRender hook
onPopoverRender: (popover, { config, state }) => {
  if (popover.nextButton) {
    popover.nextButton.style.background = 'linear-gradient(135deg, #f15722 0%, #e0481d 100%)';
    popover.nextButton.style.color = 'white';
    popover.nextButton.style.borderRadius = '8px';
    popover.nextButton.style.padding = '8px 16px';
  }
}

Root Cause

It appears that Driver.js:

1. Renders the button text initially (from nextBtnText config)
2. Applies styling (either CSS or inline styles)
3. The original text rendering is NOT cleared when styles are applied
4. A second text instance gets rendered/styled on top of the first
5. The slight offset between them makes both visible

Visual Impact

• Text appears shadowed or doubled
• Creates a blurry/ghosted effect
• Makes the button look broken or unprofessional
• Only visible when custom styling is applied
• More noticeable with contrasting colors/gradients

Affects

• Next button (driver-popover-next-btn)
• Done button (driver-popover-donebtn)
• Possibly other buttons when styled

Workaround

Currently no workaround available. The duplication occurs regardless of styling method used.

Expected Fix

Driver.js should ensure that when custom styling is applied to buttons, the text is rendered only once without duplication.

[gyananshu07]

You should switch off text-shadow.

Like this:

.driver-popover.site-tour button { text-shadow: none; }

[AchrafELGhazi]

It did not work:

Here is my driver.css by the way, for the custom styling of the driver tour popover

.driver-popover.driver-popover-custom {
background: white;
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
border: 1px solid #e5e7eb;
}

.driver-popover.driver-popover-custom .driver-popover-title {
color: #171c4a;
font-weight: 700;
border-bottom: 1px solid #f3f4f6;
}

.driver-popover.driver-popover-custom .driver-popover-description {
color: #6b7280;
}

.driver-popover.driver-popover-custom .driver-popover-navigation-btns {
gap: 8px;
}
.driver-popover.site-tour button {
text-shadow: none;
}

.driver-popover.driver-popover-custom .driver-popover-next-btn {
background: linear-gradient(135deg, #f15722 0%, #e0481d 100%);
color: white;
border-radius: 8px;
padding: 10px 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
min-height: 40px;
}

.driver-popover.driver-popover-custom .driver-popover-next-btn:hover {
background: linear-gradient(135deg, #e0481d 0%, #c63a15 100%);
}

.driver-popover.driver-popover-custom .driver-popover-prev-btn {
background: white;
color: #6b7280;
border: 1.5px solid #d1d5db;
border-radius: 8px;
padding: 10px 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
min-height: 40px;
}

.driver-popover.driver-popover-custom .driver-popover-prev-btn:hover {
background: #f3f4f6;
color: #171c4a;
}

.driver-popover.driver-popover-custom.driver-popover-arrow-side-left
.driver-popover-arrow,
.driver-popover.driver-popover-custom.driver-popover-arrow-side-right
.driver-popover-arrow,
.driver-popover.driver-popover-custom.driver-popover-arrow-side-top
.driver-popover-arrow,
.driver-popover.driver-popover-custom.driver-popover-arrow-side-bottom
.driver-popover-arrow {
border-left-color: white;
border-right-color: white;
border-top-color: white;
border-bottom-color: white;
}

.driver-stage {
border-radius: 12px;
}