Intra-post anchor links don't work in Safari / Firefox

plkap74 · May 22, 2015, 1:19pm

I’ve been experimenting with anchor links inside of posts (links to content inside of a long post). I have read that you can’t use the ids because they get stripped. I used the name property instead and it works for Chrome but throws a very cryptic error in Safari.

Error: Syntax error, unrecognized expression: [name=anchor-name

It doesn’t give a useful trace so I can’t even tell where it is coming from. Is the anchor routing dealt with by Ember? Is there custom logic for that somewhere?

Example 1 (Live bug)

Try going to this link in Chrome (it works) but in Safari it throws an error and doesn’t work:

Example 2 (Reproduced bug)

works in Chrome, throws errors in safari


def cdn_relative_path(p)
  global_path_klass.cdn_relative_path(p)
end

def compress_node(from, to)
  to_path = "#{assets_path}/#{to}"
  assets = cdn_relative_path("/assets")
  assets_additional_path = (d = File.dirname(from)) == "." ? "" : "/#{d}"
  source_map_root = assets + assets_additional_path
  source_map_url = cdn_path "/assets/#{to}.map"
  base_source_map = assets_path + assets_additional_path

  # TODO: Remove uglifyjs when base image only includes terser
  js_compressor = `which terser`.empty? ? 'uglifyjs' : 'terser'

  cmd = <<~EOS
    #{js_compressor} '#{assets_path}/#{from}' -m -c -o '#{to_path}' --source-map "base='#{base_source_map}',root='#{source_map_root}',url='#{source_map_url}'"
  EOS

  STDERR.puts cmd
  result = `#{cmd} 2>&1`

plkap74 · May 26, 2015, 12:44pm

I’m sorry I should have been more specific, I meant where was the name anchor code happening. I dove in and found it in javascripts/discourse/lib/url.js. It looks like there is a missing bracket.

github.com

discourse/discourse/blob/f496982e7952aa13e86853250bcf0505a216f94f/app/assets/javascripts/discourse/lib/url.js#L92


},

// Scroll to the same page, different anchor
scrollToId: function(id) {
  if (Em.isEmpty(id)) { return; }

  jumpScheduled = true;
  Em.run.schedule('afterRender', function() {
    var $elem = $(id);
    if ($elem.length === 0) {
      $elem = $("[name=" + id.replace('#', ''));
    }
    if ($elem.length > 0) {
      $('html,body').scrollTop($elem.offset().top - $('header').height() - 15);
      jumpScheduled = false;
    }
  });
},

/**
  Our custom routeTo method is used to intelligently overwrite default routing

Not sure why that would break only production though…

I’ll submit a PR.

plkap74 · May 26, 2015, 12:53pm

PR submitted

https://github.com/discourse/discourse/pull/3503

Topic		Replies	Views
Status of anchor link bug Feature	4	2231	July 22, 2016
Header Dropdown navigation menu custom link removes heading anchor from URL Bug	3	397	March 23, 2024
Deep linking (headers) isn't working for my site in Firefox? Support	12	1555	May 2, 2023
Anchors Not Working Across Posts Within Topic Bug	11	485	October 1, 2022
Opening a link in new tab on iPad with Chrome does not load the page Bug tablet	7	715	February 6, 2021

Intra-post anchor links don't work in Safari / Firefox

Example 1 (Live bug)

Example 2 (Reproduced bug)

Table of contents

Topic 1

Topic 2

TOC Markup

Intra-post anchor links don't work in Safari / Firefox

Example 1 (Live bug)

Example 2 (Reproduced bug)

Table of contents

Topic 1

Topic 2

TOC Markup

Related topics